<template>
  <Modal
    class="add_form"
    v-model="visible"
    title="MCP服务使用"
    :mask-closable="false"
    draggable
    sticky
    width="600px"
    footer-hide
    @on-cancel="cancel"
    @on-visible-change="cancel" 
  >
    <Tabs value="HTTP">
      <TabPane label="Streamable HTTP" name="HTTP">
        <p class="title">接入地址</p>
        <div class="copy-text">
          <p>{{ address }}</p>
          <Icon type="md-copy" size="18" style="cursor:pointer" @click="copyText(address)" />
        </div>
        <div class="script-box">
          <div class="header">
            <p>接入脚本</p>
            <Icon type="md-copy" size="18" style="cursor:pointer" @click="copyText(script)" />
          </div>
          <div class="content">{{ script }}</div>
        </div>
      </TabPane>
      <TabPane label="SSE" name="SSE">
        <p class="title">接入地址</p>
        <div class="copy-text">
          <p>{{ address }}</p>
          <Icon type="md-copy" size="18" style="cursor:pointer" @click="copyText(address)" />
        </div>
        <div class="script-box">
          <div class="header">
            <p>接入脚本</p>
            <Icon type="md-copy" size="18" style="cursor:pointer" @click="copyText(script)" />
          </div>
          <div class="content">{{ script }}</div>
        </div>
      </TabPane>
    </Tabs>
  </Modal>
</template>
<script setup>
import { ref } from 'vue';
import { copyText } from '@/util/index';

const emit = defineEmits(['cancel'])
const visible = true;
const cancel = () => {
  emit('cancel');
}

const address = ref('/api/mcp/app/yImp2VHOUNp8vWfGQl7nL4ao/mcp');
const script = `
{
  "mcpServers": {
    "mcp-682bf73803fd82385cc5a7c2": {
      "url": "/api/mcp/app/yImp2VHOUNp8vWfGQl7nL4ao/mcp"
    }
  }
}
`;

</script>
<style lang="scss" scoped>
.title {
  color: #333;
  font-weight: bold;
}
.copy-text {
  display: flex;
  align-items: center;
  background-color: #f7f8fa;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  p {
    user-select: all;
    flex: 1 0 0px;
    white-space: pre-wrap;
    word-break: break-all;
  }
}
.script-box {
  background-color: #f4f4f7;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #DFE2EA;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 10px;
  }
  .content {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 10px;
    overflow-x: auto;
  }
}
</style>